<template>
  <div id="app" class="my_app">
    <Head>上传简历</Head>
    <div class="uploadjianli">
      <div class="item">
        <van-uploader
          :after-read="uploadImg2"

        >
          <div>
            <div> 
              <div class="cl">
                <div class="fl">
                  <van-icon name="notes" size="50" />
                </div>
                <div class="fr">
                  <div class="status" v-if="doc_status&&doc_status=='已上传'">{{doc_status}}</div>  
                </div>
              </div>
              <div  v-if="doc_time">上传时间： {{doc_time}}</div>
              <div>上传文件简历</div>
              <div class="f14">支持PDF格式上传</div>
            </div>
           
          </div>
        </van-uploader>
      </div>

      <div class="item" @click="upload(2)">

        <van-uploader
          :preview-image="false"
          :after-read="uploadImg"

        >
          <div>
            <div class="cl">
                <div class="fl">
                  <van-icon name="video" size="50" />
                </div>
                <div class="fr">
                  <div class="status"  v-if="video_status&&video_status=='已上传'" >{{video_status}}</div>  
                </div>
              </div>

              <div v-if="video_time">上传时间： {{video_time}}</div>
            <div>上传视频简历</div>
            <div class="f14">视频时长20秒，大小10M以内，mp4格式</div>
          </div>
        </van-uploader>

<!--         
        <div>
          <van-icon name="video" size="50" />
        </div>
        <div>上传文件简历</div>
        <div class="f14">支持PDF格式上传</div> -->
      </div>
    </div>
  </div>
</template>

<script>
import SwitchType from "@/components/account/SwitchType";
import { handlerHttpError } from "@/utils/error";
import { dateCompare } from "@/utils/index";
import http from "@/utils/http";
import api from "@/api";
import Ad from "@/components/Ad";
import { mapState } from "vuex";
export default {
  name: "uploadjianli",
  components: {
    SwitchType,
    Ad,
  },
  data() {
    return {
      uploading: false,
      doc_status:'',
      doc_time:'',
      video_status:'',
      video_time:'',
    };
  },
  computed: {
    ...mapState({
      imUnreaded: (state) => state.imUnreaded,
      imToken: (state) => state.imToken,
    }),
    basic() {
      return this.$store.state.resume.basic;
    },
  },
  watch: {},
  async mounted() {
   this.getDetail();
    
  },
  destroyed() {},
  created() {},
  methods: {
    getDetail(){
      http
        .get("/personal/resume/myDetail",)
        .then((res) => {
          console.log('ressss',res)
          if(res.code==200){
            this.doc_status = res.data.doc_status;
            this.doc_time = res.data.doc_time;
            this.video_status = res.data.video_status;
            this.video_time = res.data.video_time;
          }
        })
        .catch((err) => {
          this.uploading = false;
        });
    },  
    // async upload(type) {
    //   if (type == 1) {
    //     this.uploadImg();
    //   } else {
    //   }
    // },
    // 作品上传
    uploadImg2(file) {
      let fileRaw = file.file;
      let filetypeArr = (fileRaw.type || "").split("/");
      let filetype = filetypeArr[1];
      console.log('file',file)
      let tyepArr = ["doc", "docx", "pdf"];
      // if (tyepArr.indexOf(filetype) == -1) {
      //   this.$notify("文件类型不支持");
      //   return false;
      // }
      // if (fileRaw.size > this.$store.state.config.fileupload_size * 1024) {
      //   let size = this.$store.state.config.fileupload_size / 1024;
      //   size = size.toFixed(1);
      //   this.$notify("文件大小超出限制，最大" + size + "mb");
      //   return false;
      // }
      this.uploading = true;
      http
        .postFormData("/personal/resume/docAdd", { file: file.file })
        .then((res) => {
          this.uploading = false;
          if (parseInt(res.code) === 200) {
            this.$toast.success('上传成功');
            this.getDetail();
          } else {
            this.$toast.fail('上传失败');
          }
        })
        .catch((err) => {
          this.$toast.fail('上传失败');
          this.uploading = false;
        });
    },
      // 作品上传
      uploadImg(file) {
      let fileRaw = file.file;
      let filetypeArr = (fileRaw.type || "").split("/");
      let filetype = filetypeArr[1];
      console.log('file',file)
      let tyepArr = ["doc", "docx", "pdf"];
      // if (tyepArr.indexOf(filetype) == -1) {
      //   this.$notify("文件类型不支持");
      //   return false;
      // }
      // if (fileRaw.size > this.$store.state.config.fileupload_size * 1024) {
      //   let size = this.$store.state.config.fileupload_size / 1024;
      //   size = size.toFixed(1);
      //   this.$notify("文件大小超出限制，最大" + size + "mb");
      //   return false;
      // }
      this.uploading = true;
      http
        .postFormData("/personal/resume/videoAdd", { file: file.file })
        .then((res) => {
          this.uploading = false;
          if (parseInt(res.code) === 200) {
            // this.$notify({ type: "success", message: res.message });
            this.$toast.success('上传成功');
            this.getDetail();
            // this.imgList.push({
            //   audit: res.data.audit,
            //   audit_text: res.data.audit_text,
            //   id: res.data.id,
            //   img: res.data.file_id,
            //   img_src: res.data.file_url,
            // });
            // // 更新简历作品
            // this.$store.dispatch("setResumeImgList", this.imgList);
            // this.setPreviewImgList();
          } else {
            this.$toast.fail('上传失败');
            // this.$notify(res.message);
          }
        })
        .catch((err) => {
          this.uploading = false;
          this.$toast.fail('上传失败');
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" >
.uploadjianli {
  width: 96%;
  margin: 0 auto;
  padding-top: 30px;
  .van-uploader{
    width: 100%;
    .van-uploader__wrapper{
      width: 100%;
      .van-uploader__input-wrapper{
        width: 100%;
      }
    }
  }
  .cl{
    width: 100%;
  }
  .cl::after {
    content: "";
    display: block;
    clear: both;
  }
  .fl{
    float: left;
  }
  .fr{
    float: right;
    text-align: right;
    .status{
      color: #07c160;
    }
    
  }
  .item {
    width: 100%;
    background: 1px solid #e5e5e5;
    box-shadow: 0 0 5px #e5e5e5;
    margin: 20px 0;
    padding: 12px 20px;
    box-sizing: border-box;
    font-size: 20px;
    line-height: 30px;
    .f14 {
      font-size: 14px;
    }
  }
}
</style>
